<template>
	<view class="page-body">
		<!-- 长按出现的删除框 -->
		<div class="del" v-if="popshow" @click="close(1)">
			<div class="delele">
				<p v-for="item in delData" :key="item.id" @click="edit(item.id)">{{ item.name }}</p>
			</div>
		</div>

		<!-- 分享弹框 -->
		<div class="share-box" v-if="isShare" @click="close(2)">
			<div class="share">
				<i class="iconfont icon-close" @click="close(2)"></i>
				<button open-type="share" @click="shares">分享至微信好友</button>
			</div>
		</div>

		<!-- 场景展示 -->
		<canvas-drag ref="canvasRef" id="canvas-drag" :graph="graph" :width="can_width" :height="can_height"
		   enableUndo="true" @longTime="longTime" :isDel="isDel" @getGraph="getGraph" :click_id="click_id" :flip="flip" ></canvas-drag>

 <cover-view :style="{width:menu_height+'rpx',height:menu_width+'rpx',top:can_height-menu_width-menu_height+'rpx'}" class="left" v-if="menuid==2||menuid==3">
	 <cover-view class="left-top"  @click="back">
		 <cover-view style="width: 100%;height: 100%;color: white;">{{childmenutop}}</cover-view>
	 </cover-view>

	 <cover-view class="left-child" v-if="childmenu.length" overflow-y:scroll>
		 <cover-view class="child-for" v-for="(cmenu, index) in childmenu" :key="index" @click="setleftmenu(cmenu)">
			 <cover-image :src="cmenu.pic_url" v-if="!cmenu.children"></cover-image>
			 <cover-view style="width: 100%;line-height: 80rpx;" v-else>{{cmenu.name?cmenu.name:cmenu.cat_name}}</cover-view>
			 <cover-view style="width: 100%;height: 2rpx;background: white;"></cover-view>
		 </cover-view>
	 </cover-view>

	 <cover-view v-if="!childmenu.length" class="datanone">
		<!-- <cover-image class="none-img" src="@/static/images/share/cash.png">
		 </cover-image> -->
		 <cover-view class="none-text">暂无数据</cover-view>
	 </cover-view>
 </cover-view>

		<!-- 菜单栏 -->
		<view class="menu" :style="{width:menu_height+'rpx',height:menu_width+'rpx',top:can_height-menu_width+'rpx'}">
			<div class="menu-right">
				<div v-for="m in menu" :key="m.id" @click="setgl(m)">
					<p :class="{ leftbor: menuid == m.id && m.id != 1 }">{{ m.name }}</p>
				</div>
				<div class="icon-cat" @click="toCart">
					<i class="iconfont icon-cart-full">
						<p>{{ cartNum < 100 ? cartNum : "99+" }}</p>
					</i>
				</div>
			</div>
		</view>

		<!-- 足迹 -->
		<cover-view class="root" :style="{width:can_height-12+'rpx',height:menu_height+'rpx',top:-menu_height-10+'rpx'}" v-if="show_root">
			<cover-view class="root-for" v-for="(img,index) in rootlist" :key="img+index" :style="{height:root_size+'rpx',width:root_size+'rpx'}">
				<cover-image :src='img' class="img"></cover-image>
				<!-- <i class="iconfont"></i> -->
			</cover-view>
		</cover-view>

		<gz-image-rotate ref="gzImageRotate" @success="success"></gz-image-rotate>

		<newSkuPopup
		  ref="skuPopup"
		  :finalmsg="finalmsg"
		  :shopmsg="shopmsg"
		  :subIndex="subIndex"
		  :shopimg="shopimg"
		  :skuText="skuText"
		  :diyTemplates="templates"
		  @closeSkuPopup="closeSkuPopup"
		  @setSelectNum="setSelectNum"
		   @selectPushData="selectPushData"
		   @buyNow="confirmBuy"
		   :is_rotate="true"
		></newSkuPopup>
	</view>
</template>

<script>
import canvasDrag from "../components/canvas-drag/index";
import gzImageRotate from '../components/gz-image-rotate/gz-image-rotate.vue';
import newSkuPopup from "../components/skuPopup.vue";
export default {
	components: {
		canvasDrag,
		gzImageRotate,
		newSkuPopup
	},
	data() {
		return {
			graph: {},
			isHide: false,
			delData: [{ id: 1, name: '删除' }, { id: 2, name: '详情' }, { id: 3, name: '加入购物车' }, { id: 4, name: '镜像' }],//长按移动框出现的菜单
			popshow: false, //遮罩层显示隐藏
			menu: [
				{ id: 1, name: '返回' },
				{
					id: 2,
					name: '商品',//item
					top:true,
	         		type: 'text',
					children:[]
				},
				{
					id: 3,
					name: '场景',
					top:true,
					children:[]
				},
				{ id: 4, name: '照片' },
				{ id: 5, name: '足迹' },
				{ id: 6, name: '保存' },
				{ id: 7, name: '分享' }
			],
			menuid: '', //白色菜单高量
			childmenu: [], //透明黑色菜单列表
			childmenutop: '', //透明菜单顶部
			bgcurl: '', //点击照片保存背景图片地址
			imgurl: '' ,//选中的编辑图片地址
			can_width:'',//画布的宽
			can_height:'',//画布的高
			menu_width:'',//菜单栏的宽
			menu_height:'',//菜单栏的高
			minScaling:0.5,//缩放的最小比例
			maxScaling:2,//最大缩放比例
			isDel:'del',//弹出层通过isDel删除图片
			rootlist:[],//足迹
			show_root:false,//是否显示足迹
			save_img:'',//保存图片路径
			root_size:'',//足迹里图片的大小
			arr:[],
			page:1,//分页
			isSave:false,//是否保存
			goods_id:'',//记录从哪个商品进入的id
			isShare:false,//控制分享弹框显示
			idArr:[],//场景里的商品id集合
			works_id:'',//分享带的id
			now_graph:'',//当前点击的商品
			click_id:'',//点击菜单的商品时保存商品id传给画布
			getGraphid:'',//当前画布上点击的商品的id
			shopmsg: null, //商品信息
			finalmsg: null, //选取规格后的商品数量，以及是否为会员价格信息
			subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
			shopimg: "", //选择商品规格时的商品图片
			value:1,// sku选择的数量
			attr:[],//规格组
			selectArr:[],//存放被选中的值
			shopItemInfo: {}, //存放要和选中的值进行匹配的数据
			goodsInfoNew: {}, //当规格选择完成时重新覆盖商品信息
			skutitlename: "", //提示用户例如：请选择温度，口味；或者提示用户已选择温度，口味
			skutitlenamelist: [], //存储规格标题
			skuId: "", //规格id
			templates: [],
			flip:false,//是否镜像
		};
	},
	onLoad(options) {
		this.goods_id=options.goods_id;
		this.click_id=options.goods_id;
		this.getEle();
		this.getmenus();

	},
	computed:{
		skuText() {
		  if (this.skuId != "") {
		    let str = [];
		    this.skuId.forEach((item) => {
		      str.push(item.attr_name);
		    });
		    return str.join(",");
		  } else {
		    return this.$t("diy.sku");
		  }
		},
		cartNum() {
		  return this.$store.getters.cartNum;
		},
	},
	onShareAppMessage() {
	  const storeId = uni.getStorageSync("store_id");
	  return {
	    path: `/collocation/shoreworks/shoreworks?store_id=${storeId}&id=${this.works}`,
	    title: "我设计了一个搭配方案,快来看看吧~",
	    imageUrl: this.save_img,
	  };
	},
	mounted() {
		let view = uni
			.createSelectorQuery()
			.in(this)
			.select('.move-box');
		view.boundingClientRect(data => {
			this.realWidth = data.width;
			this.realHeight = data.height;
			this.realCenterX = data.right - data.width / 2;
			this.realCenterY = data.bottom - data.height / 2;
		}).exec();
	},

	methods: {
		toCart(){
			uni.switchTab({
				url:'/pages/shoppingcart/shoppingcart'
			})

		},
		confirmBuy() {
		    this.addCart();
		},
		// 点击购物车按钮
		handleToCard(obj) {
		  const isLogin = this.$utils.isLogin();
		  if (!isLogin) return;
		  this.shopmsg=obj;
		  this.shopimg=obj.cover_pic;
		  if(this.shopmsg){
			  this.$refs.skuPopup.attrArr=JSON.parse(JSON.stringify(this.shopmsg.attr_group_list));
		  }
		  // this.id=obj.id;
		  var isarr=this.shopmsg.attr instanceof Array;
		  if(!isarr){
			 		  this.shopmsg.attr=JSON.parse(this.shopmsg.attr);
		  }

		 // if (this.shopmsg.pic_list.length != 0) {
		 //   if (this.shopmsg.pic_list[0].type != "video") {
		 //     this.shopimg = this.shopmsg.pic_list[0].pic_url;
		 //   } else {
		 //     if (this.shopmsg.pic_list.length > 1) {
		 //       this.shopimg = this.shopmsg.pic_list[1].pic_url;
		 //     }
		 //   }
		 // }
		  for (var i of this.shopmsg.attr) {
		    var sp = "";
		    for (var j of i.attr_list) {
		      sp += j.attr_id + "_";
		    }
		    if (sp.length > 0) {
		      sp = sp.substr(0, sp.length - 1);
		    }
		    this.shopItemInfo[sp] = i;
		  }
		  for (var m of this.shopmsg.attr_group_list) {
		    this.skutitlenamelist.push(m.attr_group_name);
		  }
		  this.checkItem();
		  // if (this.goodsDisabled.no_num || this.goodsInfo.out_line) return;
		  if (obj.is_negotiable == 1) {
		    let mdLocalData = uni.getStorageSync("storeMdData");
		    let mobile = "";
		    if (mdLocalData) {
		      mdLocalData = JSON.parse(mdLocalData);
		      if (mdLocalData.mobile) {
		        mobile = mdLocalData.mobile;
		      }
		    } else {
		      mobile = this.stores.mobile;
		    }
		    if (!mobile) {
		      uni.showToast({
		        title: this.$t("diy.noPhone"),
		        icon: "none",
		        duration: 2000,
		      });
		      return;
		    }

			this.$utils.makePhoneCall(mobile);

		    return;
		  }
		  this.addCart(obj);
		},
		// 关闭sku弹框
		closeSkuPopup() {
		  this.$refs.skuPopup.hidePopup();
		},
		// 判断库存是否为0
		isMay(result) {
		  for (var i in result) {
		    if (result[i] == "") {
		      return true;
		    }
		  }
		  result = result.join("_");
		  if (!this.shopItemInfo[result]) {
		    return false;
		  }
		  return this.shopItemInfo[result].num == 0 ? false : true;

		},
		//通过选取规格获取该规格下的商品准确价格
		getPriceNum(arrt_list) {
		  if (this.activity_new_user_id) {
		    let ids = arrt_list.join(","),
		      attr = this.shopmsg.attr;

		    for (let i = 0; i < attr.length; i++) {
		      let item = attr[i].attr_list.map((el) => el.attr_id).join(",");
		      if (ids === item) {
		        this.finalmsg = attr[i];
		        break;
		      }
		    }
		    return;
		  }

		  var params = {
		    goods_id: this.shopmsg.id,
		    attr_list: arrt_list,
		    number: this.value,
		  };
		  try {
		    params.attr_list = JSON.stringify(params.attr_list);
		    this.$allrequest.goods.goodsAttrInfo(params).then((res) => {
		      if (res.code == 0) {
		        this.finalmsg = res.data;
		      }
		    });
		  } catch (e) {
		  }
		},
		//获取选定的值
		getInfo(item) {
		  var checked = item.join("_");
		  if (this.shopItemInfo[checked]) {
		    this.goodsInfoNew = this.shopItemInfo[checked];
		    this.skutitlename =
		      this.$t("common.choosed") +
		      "：" +
		      this.shopItemInfo[checked].supplier_price;
		    this.skuId = this.shopItemInfo[checked].attr_list;
		  } else {
		    this.goodsInfoNew = {};
		    var skutitle = [];
		    for (var i = 0; i < this.skutitlenamelist.length; i++) {
		      if (this.skutitlenamelist[i]) {
		        skutitle.push(this.skutitlenamelist[i]);
		      }
		    }
		    this.skutitlename =
		      this.$t("common.noChoose") + " " + skutitle.toString(",");
		    this.skuId = "";
		  }
		  if (this.skuId) {
		    this.arrt_list = [];
		    for (var i = 0; i < this.skuId.length; i++) {
		      this.arrt_list.push(this.skuId[i].attr_id);
		    }
		    this.arrt_list.join(",");
		    this.getPriceNum(this.arrt_list);
		  }
		},
		//处理数据
		checkItem() {
		  var option = this.shopmsg.attr_group_list;
		  var result = []; //定义数据存储被选中的值)
		  for (let i = 0; i < option.length; i++) {
		    result[i] = this.selectArr[i] ? this.selectArr[i] : "";
		  }
		  for (let i = 0; i < option.length; i++) {
		    var last = result[i];
		    for (var k = 0; k < option[i].attr_list.length; k++) {
		      result[i] = option[i].attr_list[k].attr_id;
		      option[i].attr_list[k].isShow = this.isMay(result);
		    }
		    result[i] = last;
		  }
		  this.shopmsg.attr_group_list = [];
		  this.$set(this.shopmsg, "attr_group_list", option);

		  this.getInfo(this.selectArr);
		},
		pushData(id, pindex, index, disable, attr_group_id) {
		  if (!disable) {
		    return "";
		  }
		  if (this.selectArr[pindex] != id) {
		    this.selectArr[pindex] = id;
		    this.subIndex[pindex] = index;
		    this.skutitlenamelist[pindex] = "";
		    this.attr[pindex] = {
		      attr_id: id,
		      attr_group_id: attr_group_id,
		    };
		  }
		  this.checkItem();
		},
		selectPushData(e) {
		  let { id, pindex, index, disable, attr_group_id } = { ...e };
		  this.pushData(id, pindex, index, disable, attr_group_id);
		},
		setSelectNum(e) {
		  this.value = e;
		},
		addCart(){
			if (!this.$refs.skuPopup.showSkuPopup) {
			  this.$refs.skuPopup.showPopup();
			  return;
			}
			if (this.finalmsg == "" || this.finalmsg == undefined) {
			  uni.showToast({
			    title: this.$t("diy.sku"),
			    icon: "none",
			  });
			  return;
			}
			if (this.value > this.finalmsg.num || this.value > this.shopmsg.num) {
			  uni.showToast({
			    title: this.$t("diy.stock"),
			    icon: "none",
			  });
			  return;
			}
			this.$allrequest.goods
			  .addCart({
			    goods_id: this.getGraphid,
			    attr: JSON.stringify(this.attr),
			    num: this.value,
			  })
			  .then((res) => {
			    this.show = !this.show;
			    if (res.code == 0) {
			      uni.showToast({
			        title: res.msg,
			        icon: "none",
			      });
			      // 加购成功后，关闭sku弹框
			      this.closeSkuPopup();
			    } else {
			      uni.showToast({
			        title: res.msg,
			        icon: "none",
			      });
			    }
			  })
			  },
		//分享
		shares(){
		  uni.share({
		  	provider: "weixin",
		  	scene: "WXSceneSession",
		  	type: 0,
			href:`/collocation/shareworks/shareworks?id=${this.works_id}`,
		  	title: "我设计了一个搭配方案,快来看看吧~",
			summary: "我设计了一个搭配方案,快来看看吧~",
			imageUrl:this.save_img
		  })
		},
		//导出图片成功后进行旋转
		async success(e){
			this.save_img=e.tempFilePath;
			  if(this.isShare){
		var loa=await this.$http.UPLOAD_IMAGE(e.tempFilePath)
		        if(loa.url){
			const req=await this.$allrequest.collocation.shareBefore({
					image:loa.url,
					goods_id:this.idArr.join()
				})
				this.works_id=req.data.works_id
		}
			  }else if(this.isSave&&this.menuid==6){
				 this.$utils.saveImg(this.save_img)
			  }

		},
		//获取菜单
		async getmenus(){
			const res=await this.$allrequest.collocation.getMenus({
				goods_id:this.goods_id
			});
			this.imgurl=res.data.accessories_image;
			var index=this.rootlist.indexOf(this.imgurl);
			if(index==-1){
				this.rootlist.push(this.imgurl)
			}
			this.idArr.push(this.goods_id);
			uni.getImageInfo({
				src:res.data.defaultScene,
				success:bgc=>{
					this.bgcurl=bgc.path;
					this.onChangeBgImage()
				}
			});
			uni.getImageInfo({
				src:res.data.accessories_image,
				success:acce=>{
					this.setData({
					  graph: {
					    w: 200,
					    h: 200,
					    type: 'image',
					    url: acce.path,
						minScaling:this.minScaling,
						maxScaling:this.maxScaling
					  }
					});
				}
			})
			uni.setStorageSync('menu',JSON.stringify(res.data))
			if(this.menuid==2){
				this.childmenu=res.data.goods_cat
			}else if(this.menuid==3){
				this.childmenu=res.data.intelligent_match_cat;
			}
		},
		getEle(){
			var query=uni.createSelectorQuery().in(this);
			query.select('.page-body').boundingClientRect(data => {

				 this.can_width=data.width*2;
				 this.can_height=data.height*0.8*2;
			    this.menu_width=data.width*2;
				this.menu_height=data.height*0.1*2;
				this.root_size=parseInt((data.height*0.9*2/9))-12
			}).exec();
		},
		/**
		 * 导出图片
		 */
		onExport() {
		  this.$refs.canvasRef.exportFun().then(async filePath => {

		this.$refs.gzImageRotate.start(filePath, 3)
		  }).catch(e => {
		  });
		},
		/**
		 * 添加图片
		 */
		onAddImage() {
		      this.setData({
		        graph: {
		          w: 200,
		          h: 200,
		          type: 'image',
		          url: this.imgurl,
				  minScaling:this.minScaling,
				  maxScaling:this.maxScaling
		        }
		      });
		},
		// 改变背景图
        onChangeBgImage() {
		this.$refs.canvasRef.changeBgImage(this.bgcurl)
    },
	   async request(obj){
		   var pro={};
			if(this.menuid==2){
				pro=await this.$allrequest.collocation.getShops({
					cat_id:obj.id,
					page:this.page,
					is_accessories:1
				})

			}else if(this.menuid==3){
				pro=await this.$allrequest.collocation.getScene({
					cat_id:obj.id,
					page:this.page
				})

			}
			obj.children=pro.data.list;
			this.childmenu=obj.children;
		},
		//返回上一级
		back() {
			if (this.childmenutop == '选择商品' || this.childmenutop == '选择场景') {
				this.menuid = '';
			} else {
				this.menu.forEach(item=>{
				   if(item.children){
					   item.children.forEach(ele=>{
						   if(ele.children==this.childmenu){
							   if(item.id==2){
								   this.childmenutop='选择商品';
								   this.childmenu=item.children;
							   }else if(item.id==3){
								this.childmenutop='选择场景';
								this.childmenu=item.children;
							   }
						   }else if(ele.children){
							   ele.children.forEach(res=>{
								   if(res.children==this.childmenu){
									   this.childmenutop=ele.name;
									   this.childmenu=ele.children
								   }
							   })
						   }
					   })
				   }
				})
			}
		},
		//左侧透明菜单点击
		setleftmenu(obj) {
			if(obj&&obj.children){
				this.childmenutop=obj.name?obj.name:obj.cat_name
			}else if(obj.top&&obj.id==2){
				this.childmenutop='选择商品'
			}else if(obj.top&&obj.id==3){
				this.childmenutop='选择场景'
			}
			if (obj.children!==undefined&&obj.children.length>0) {
				this.childmenu = obj.children;
			}else if(obj.children!==undefined&&obj.children.length<1&&obj.children){
				this.request(obj)
			}else if(!obj.children){
				uni.getImageInfo({
					src:obj.pic_url,
					success:res=>{
						if(this.menuid==2){
							this.click_id=obj.id;
							this.setData({
								  graph: {
								    w: 200,
								    h: 200,
								    type: 'image',
								    url: res.path,
									minScaling:this.minScaling,
									maxScaling:this.maxScaling
								  }
								});
							}else if(this.menuid==3){
								this.bgcurl=res.path;
								this.onChangeBgImage()
							}
						}

				})
			    this.imgurl=obj.pic_url;
				this.idArr.push(obj.id);
				var index=this.rootlist.indexOf(this.imgurl);
				if(index==-1){
					this.rootlist.push(this.imgurl)
				}


			}

		},
		//右侧菜单点击
		setgl(obj) {
			var left_menu=uni.getStorageSync('menu');
			left_menu=JSON.parse(left_menu);
			switch (obj.id) {
				case 1:
				    this.show_root=false;
					uni.navigateBack();
					break;
				case 2:
				    this.childmenu=left_menu.goods_cat;
					obj.children=this.childmenu;
				    this.show_root=false;
					if(this.childmenu!=this.arr){
					this.childmenutop = '选择商品';
		}
					break;
				case 3:
					this.childmenu=left_menu.intelligent_match_cat;
					obj.children=this.childmenu;
				    this.show_root=false;
					if(this.childmenu!=this.arr){
						this.childmenutop = '选择场景';
					}
					break;
				case 4:
				    this.show_root=false;
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['album', 'camera '],
						success: res => {
							this.bgcurl = res.tempFilePaths[0];
							this.isHide=false;
							this.onChangeBgImage();
						}
					});
					break;
			    case 5:
				this.show_root=!this.show_root;
				break;
				case 6:
				 this.isSave=!this.isSave;
				 this.show_root=false;
				 if(this.isSave){
					 this.onExport()
				 };
				 break;
				 case 7:
				 this.isShare=!this.isShare;
				 if(this.isShare){
					 this.onExport()
				 };
				 break;
			}
			this.menuid = this.menuid == obj.id ? '' : obj.id;
		},
		//点击遮罩层关闭
		close(num) {
			if(num==1){
				this.popshow = false;
			}else if(num==2){
				this.isShare=false
			}

		},
		//长按出现的编辑框
		async edit(id) {
			if(id==1){
				this.$refs.canvasRef.remove(this.now_graph,'fath')
			}else if(id==2){
				this.$utils.toUrl(`/goods/goods/goods?id=${this.getGraphid}`)
			}else if(id==3){
				if(this.getGraphid){
				const res=await this.$allrequest.goods.goodsDetails({
					id:this.getGraphid
				})
			  this.handleToCard(res.data)
				}
			}else if(id==4){
			   this.flip=!this.flip;
			   uni.setStorageSync('flip',this.flip)
			    this.$refs.canvasRef.draw()
			}
		},

		//长按出现删除框
		longTime(obj) {
			if(obj==this.now_graph&&obj&&this.now_graph){
				this.popshow = true;
			}
		},
	    getGraph(obj){
			this.now_graph=obj;
			if(obj){
					this.getGraphid=obj.text;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.bornone {
	border: none !important;
}
.leftbor {
	color: #ac7f32 !important;
	border-left: 4rpx solid #ac7f32 !important;
}
/deep/.u-drawer-content{
	width:70% !important;
	margin: auto !important;
}
.page-body {
	width: calc(100vw + 60rpx);
	transform: translateX(-30rpx);
	height: calc(100vh + 60rpx);
	// display: flex;
	// overflow: hidden;
	// position: absolute;
	// top: -100vw;
	// width: 100vh;
	// height: 100vw;
	// transform: rotate(90deg);
	// transform-origin: bottom left;
	// z-index: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	.share-box{
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7) !important;
		position: absolute !important;
		top: 0!important;
		left: 0 !important;
		z-index: 999 !important;
		display: flex;
		justify-content: center;
		align-items: center;
		.share{
			width: 400rpx;
			height: 300rpx;
			background: white;
			border-radius: 10rpx !important;
			transform: rotate(90deg);
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			i{
				position: absolute;
				top:20rpx;
				right:20rpx;
				font-size: 40rpx;
			}
			button{
				width: 80%;
				background: #ac7f32;
				border-radius: 10rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: white;
				font-size: 32rpx;
			}
		}
	}
	.del{
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7) !important;
		position: absolute !important;
		top: 0!important;
		left: 0 !important;
		z-index: 999 !important;
		display: flex;
		justify-content: center;
		align-items: center;
			.delele {
				background: white;
				border-radius: 10rpx !important;
				transform: rotate(90deg);
				p {
					border-bottom: 4rpx solid #ddd !important;
					padding: 10rpx;
					width: 300rpx;
					&:last-child {
						border: none !important;
					}
				}
				}
	}
	/deep/.u-popup {
		width: 100% !important;
		height: 100% !important;
		background: red;
		position: absolute !important;
		top: 0;
		left: 0;
		z-index: 999 !important;
		.u-popup__content {
			border-radius: 10rpx !important;

			.delele {
				background: white;
				border-radius: 10rpx !important;
				p {
					border-bottom: 4rpx solid #ddd !important;
					padding: 10rpx;
					width: 300rpx;
					&:last-child {
						border: none !important;
					}
				}
			}
		}
	}
	#canvas-drag{
		// width: 90%;
		// height: 100%;
		width: 100% !important;
		height: 90% !important;
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
        // transform: translateX(-40rpx) !important;
	}
		.move-area {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background-repeat: no-repeat;
			background-size: cover;
			.move-box {
				position: relative;
				width: 175px;
				height: 175px;
				padding: 1px;
				.opt-icon {
					position: absolute;
					width: 25px;
					height: 25px;
					border-radius: 50%;
					z-index: 5;
				}
				.del-icon {
					background-color: red;
					left: 0;
					top: 0;
				}
				.edit-icon {
					background-color: green;
					right: 0;
					bottom: 0;
				}
				.scale-icon {
					background-color: blue;
					right: 0;
					top: 0;
				}
				.move-body {
					box-sizing: border-box;
					margin: 12.5px;
					width: 150px;
					height: 150px;
					border: 2px dotted red;
					display: flex;
					justify-content: center;
					align-items: center;
					img {
						width: 280rpx;
						height: 280rpx;
					}
				}

		}
	}
	.left{
		position: absolute;
		transform: rotate(90deg);
		transform-origin: bottom left;
        display: flex;
		flex-direction: column;
		align-items: center;
		.datanone {
			width: 100%;
			height: calc(100% - 60rpx);
			background: rgba(0, 0, 0, 0.5);
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 100rpx;
			.none-img {
				width: 80%;
				height: 200rpx;
				margin-bottom: 40rpx;
			}
			.none-text {
				text-align: center;
				color: white;
			}
		}
		.left-top{
			width:100%;
			height: 80rpx;
			text-align: center;
			background: rgba(0, 0, 0, 0.5);
		}
		.left-child{
			width: 100%;
			height:  calc(100% - 60rpx);
			display: flex;
			flex-direction: column;
			align-items: center;
			background: rgba(0, 0, 0, 0.3);
			.child-for{
				    width: 100%;
					padding: 10rpx 0;
					min-height: 80rpx;
					color: white;
					text-align: center;

			}
		}
	}
	.menu {
		position: absolute;
		transform: rotate(90deg);
		transform-origin: bottom left;
		.menu-right {
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			div {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-grow: 1;
				p {
					text-align: center;
					width: 100%;
				}
			}
			.icon-cat {
				display: flex;
				justify-content: center;
				align-items: center;
				i {
					color: black;
					font-size: 38rpx;
					font-weight: bold;
					position: relative;
					p {
						background: #b6291f;
						position: absolute;
						right: -30%;
						top: -30%;
						width: 30rpx;
						height: 40rpx;
						border-radius: 50%;
						text-align: center;
						line-height: 40rpx;
						color: white;
						font-size: 20rpx;
					}
				}
			}
		}
		.menu-left {
			width: 130%;
			position: absolute;
			z-index: 999;
			left: -130%;
			height: 100%;
			.left-top {
				width: 100%;
				height: 80rpx;
				background-color: rgba(0, 0, 0, 0.7);
				display: flex;
				justify-content: center;
				align-items: center;
				p {
					color: white;
				}
				i {
					color: white;
					margin-right: 6rpx;
				}
			}
			.datanone {
				width: 100%;
				height: calc(100% - 60rpx);
				background: rgba(0, 0, 0, 0.5);
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 100rpx;
				img {
					width: 80%;
					height: 200rpx;
					margin-bottom: 40rpx;
				}
				p {
					text-align: center;
					color: white;
				}
			}
			.left-child {
				width: 100%;
				height: calc(100% - 60rpx);
				background: rgba(0, 0, 0, 0.5);
				overflow-y: scroll;
				&::-webkit-scrollbar {
					display: none;
				}
				.child-for {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 10rpx;
					min-height: 80rpx;
					border-bottom: 2rpx solid white;
					p {
						color: white;
					}
					i {
						color: white;
					}
				}
			}
		}
	}
    .root{
		display: flex;
		background: rgba(0, 0, 0, 0.3)!important;
		transform: rotate(90deg);
		transform-origin: bottom left;
		position: absolute !important;
		left: 0 !important;
		z-index: 998 !important;
		padding: 6rpx;
		overflow: hidden;
		.root-for{
			position: relative;
			background: #c0c0c0;
			opacity: 0.5;
			// margin-right: 2rpx;
			flex-shrink: 0;
			.img{
				width: 50%;
				height: 50%;
				position: absolute;
				top: 20rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
}
</style>
